<template>
	<view class="content">
		<u-navbar title-size="34" leftIconColor="#343A40" title-color="#343A40" :border-bottom="false"
			leftIcon="arrow-left" :custom-back="tui.goBack" placeholder>
			<view class="slot-wrap">
				<view class="search-wrap">
					<!-- 如果使用u-search组件，必须要给v-model绑定一个变量 -->
					<u-search v-model.trim="keyword" :show-action="true" height="70" bg-color="#ffffff" border-color="#D8D9E1"
						@custom="searchValue" action-text="搜索" :action-style="{color: '#292940',size:'17px'}"
						placeholder="搜索创作者/作品/专辑" placeholder-color="#CED4DA"
						search-icon-color="#ADB5BD"></u-search>
				</view>
			</view>
		</u-navbar>
		<view class="search-box">
			<view class="padding-wrap bg-ffffff">
				<u-tabs :list="tabList" active-color="#292940" inactive-color="#292940" :is-scroll="false"
					font-size="30" bar-height="6" bar-width="24" :bar-style="activeColor" :current="current"
					@change="change"></u-tabs>
			</view>
		</view>
		<view class="search-list-box">
			<view v-if="current==0">
				<view class="padding-wrap draft-title  d-flex justify-content-between align-items-center">
					<view class="d-flex align-items-center">
						<view class="text-999BA8 fz-30">共有
							<span class="px-1">{{worksTotal || 0}}</span>作品
						</view>
					</view>
				</view>
				<view>
					<view class="padding-wrap creation-box d-flex justify-content-between">
						<view class="creation-item" v-for="item in worksList" @click="toWorksDetail(item)">
							<view class="position-relative">
								<view class="creation-cover">
									<image :src="item.file" mode="aspectFill" v-if="item.type == 1"></image>
									<image :src="item.cover" mode="aspectFill" v-else></image>
								</view>
								<view class="position-absolute creation-quantity">
									<view class="d-flex justify-content-center align-items-center">
										<span class="text-CCCDD5 fz-20">发行:</span>
										<span class="text-00D7FF fz-22 font-DIN">{{tui.filterCount(item.count)}}</span>
										<span class="line"></span>
										<span class="text-CCCDD5 fz-20">流通:</span>
										<span class="text-00D7FF fz-22 font-DIN">{{tui.filterCount(item.sell_user_works_count)}}</span>
									</view>
								</view>
							</view>
							<view class="creation-item-title creation-item-padding line-h-1em text-292940 fz-26">{{item.name}}
							</view>
							<view class="text-292940 creation-item-padding creation-item-price" v-if="item.sell_user_works_count > 0">
								<span class="fz-28 font-DIN">￥</span>
								<span class="fz-36 font-DIN">{{item.min_price || '--'}}</span>
								<span class="fz-32 pl-1" v-if="item.min_price">起</span>
							</view>
							<view class="text-292940 creation-item-padding creation-item-price" v-else>
								<span class="fz-28 font-DIN">已售完</span>
							</view>
						</view>
					</view>
					<u-loadmore :status="worksStatus" v-show="worksLoading" margin-top="50" />
					<view class="no-data" v-show="worksTotal === 0 && !worksLoading">
						<image src="../../static/market/no-data.png" mode="aspectFill"></image>
						<view style="color: #b5b5b5;">搜索无结果</view>
					</view>
				</view>
			</view>
			<view v-if="current==1">
				<view v-for="item in seriesList" @click="toAlbumDetail(item)"  class="d-flex justify-content-between align-items-center album-list">
					<view class="d-flex">
						<view class="icon-album">
							<image src="/static/creation/icon-album.png"></image>
						</view>
						<view>
							<view class="album-title text-292940 fz-32">{{item.name}}</view>
							<view class="text-999BA8 fz-28 pt-1">{{item.works_count}} 作品</view>
						</view>
					</view>
					<image class="album-detail" src="/static/mine/me-more.png"></image>
				</view>
				<u-loadmore :status="seriesStatus" v-show="seriesLoading" margin-top="50" />
				<view class="no-data" v-show="seriesTotal === 0 && !seriesLoading">
					<image src="../../static/market/no-data.png" mode="aspectFill"></image>
					<view style="color: #b5b5b5;">搜索无结果</view>
				</view>
			</view>
			<view v-if="current==2">
				 <view class="d-flex align-items-center author-list" v-for="item in authorList" @click="toAuthor(item)">
					<view class="author-img">
						<image :src="item.avatar || $avatar" mode="aspectFill"></image>
					</view>
					<view>
						<view class="text-343A40 fz-30 mb-1">{{item.nickname}}</view>
						<view class="d-flex text-9099A1 fz-24">
							<view class="pr-1">{{item.works_count}}</view>
							<view>作品</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="authorStatus" v-show="authorLoading" margin-top="50" />
				<view class="no-data" v-show="authorTotal === 0 && !authorLoading">
					<image src="../../static/market/no-data.png" mode="aspectFill"></image>
					<view style="color: #b5b5b5;">搜索无结果</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				keyword: '',
				showAction: true, //是否开启右边按钮控件
				activeColor: { 'background': 'linear-gradient(141deg, #7A60FF 0%, #1EF7FE 100%)' },
				current: 0,
				tabList: [{
						name: '作品'
					},
					{
						name: '专辑'
					},
					{
						name: '作者'
					}
				],
				worksPage:1,
				worksStatus:'loading',
				worksLoading:false,
				worksTotal:'',
				worksList: [],
				
				seriesPage:1,
				seriesStatus:'loading',
				seriesLoading:false,
				seriesTotal:'',
				seriesList: [],
				
				authorPage:1,
				authorStatus:'loading',
				authorLoading:false,
				authorTotal:'',
				authorList: [],
				
				works_keyword:'',
				series_keyword:'',
				author_keyword:'',
				
				status: 'loading',
				total:0,
				moreShow:false
			}
		},

		watch:{
			keyword(val){
				this.$nextTick(()=>{
					this.keyword = this.$u.trim(val.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\ ]/g,''))
				})
			}
		},
		onLoad(options) {
			this.keyword = options.keyword || ''
			this.worksSearch()
			this.seriesSearch()
			this.authorSearch()
		},
		onReachBottom() {
			if(this.current == 0){
				if(this.worksList.length < this.worksTotal){
					this.worksPage ++
					this.worksSearch()
				}else{
					this.worksStatus = 'nomore'
					this.worksLoading = true
				}
			}else if(this.current == 1){
				if(this.seriesList.length < this.seriesTotal){
					this.seriesPage ++
					this.seriesSearch()
				}else{
					this.seriesStatus = 'nomore'
					this.seriesLoading = true
				}
			}else{
				if(this.authorList.length < this.authorTotal){
					this.authorPage ++
					this.authorSearch()
				}else{
					this.authorStatus = 'nomore'
					this.authorLoading = true
				}
			}
		},
		methods: {
			toAuthor(item){
				uni.navigateTo({
					url:`/pages/index/author?user_id=${item.id}`
				})
			},
			toWorksDetail(item){
				uni.navigateTo({
					url:`/pages/assets/worksDetail?token_id=${item.id}`
				})
			},
			toSeriesDetail(item){
				uni.navigateTo({
					url:`/pages/assets/albumDetail?xlbs=${item.uuid}`
				})
			},
			//价格格式化
			priceFormat(value) {
				if (value) {
					let price = parseFloat(value).toFixed(2)
					let index = price.indexOf('.')
					return [price.substr(0, index), price.substr(index)]
				}
				return ['00,', '00']
			},
			searchValue(e){
				if(this.keyword !== ''){
					this.$store.commit('public/SET_SEARCHHISTORY',this.keyword)
					if (this.current == 0) {
						this.worksSearch(1)
					} else if (this.current == 1) {
						this.seriesSearch(1)
					} else {
						this.authorSearch(1)
					}
				}else{
					uni.$u.toast('请输入搜索关键字')
				}
			},
			change(index) {
				if (this.current != index) {
					this.current = index
					if (this.current == 0) {
						if(this.keyword != this.works_keyword){
							this.worksSearch(1)
						}
					} else if (this.current == 1) {
						if(this.keyword != this.series_keyword){
							this.seriesSearch(1)
						}
					} else {
						if(this.keyword != this.author_keyword){
							this.authorSearch(1)
						}
					}
				}
			},
			//搜索作品
			worksSearch(val) {
				if(this.works_keyword != this.keyword || val == 1){
					this.worksList = []
					this.worksTotal = ''
					this.worksPage = 1
					if(this.keyword != ''){
						this.$store.commit('public/SET_SEARCHHISTORY',this.keyword)
					}
				}
				this.worksLoading = true
				this.worksStatus = 'loading'
				this.$store.dispatch('works/searchWorks', { name: this.keyword,page:this.worksPage }).then(res => {
					this.worksList = [...this.worksList,...res.data.data]
					this.worksTotal = res.data.total
					if (this.worksTotal == this.worksList.length && this.worksList.length > 4) {
						this.worksStatus = 'nomore'
					} else {
						this.worksLoading = false
					}
					this.works_keyword = this.keyword
				})
			},
			//搜索系列
			seriesSearch(val) {
				if(this.series_keyword != this.keyword || val == 1){
					this.seriesList = []
					this.seriesTotal = ''
					this.seriesPage = 1
					if(this.keyword != ''){
						this.$store.commit('public/SET_SEARCHHISTORY',this.keyword)
					}
				}
				this.seriesLoading = true
				this.seriesStatus = 'loading'
				this.$store.dispatch('works/albumAll', { name: this.keyword , page:this.seriesPage}).then(res => {
					this.seriesLoading = false
					this.seriesList = [...this.seriesList,...res.data.data]
					this.seriesTotal = res.data.total
					this.series_keyword = this.keyword
				})
			},
			//搜索作者
			authorSearch(val) {
				if(this.author_keyword != this.keyword || val == 1){
					this.authorList = []
					this.authorTotal = ''
					this.authorPage = 1
					if(this.keyword != ''){
						this.$store.commit('public/SET_SEARCHHISTORY',this.keyword)
					}
				}
				this.authorLoading = true
				this.authorStatus = 'loading'
				this.$store.dispatch('works/searchUser', { name: this.keyword ,page:this.authorPage }).then(res => {
					this.authorLoading = false
					this.authorList = [...this.authorList,...res.data.data]
					this.authorTotal = res.data.total
					this.author_keyword = this.keyword
				})
			},
			//作品详情
			toWorksDetail(item){
				uni.navigateTo({
					url:`/pages/secondary/market/index?work_id=${item.id}`
				})
			},
			//专辑详情
			toAlbumDetail(item){
				uni.navigateTo({
					url:`/pages/secondary/creation/album?name=${item.name}&id=${item.id}&user_id=${item.user_id}`
				})
			},
			//前往作者
			toAuthor(item){
				uni.navigateTo({
					url:`/pages/secondary/market/author?userInfo=${JSON.stringify(item)}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		min-height: 100vh;
		background: #F8F9FB;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		flex: 1;

		.search-wrap {
			width: 100%;
			margin: 0 20rpx 0 0;
			/deep/.u-action-active{
				position: absolute;
				right:30upx;
				width: 110upx;
			}
			/deep/.u-action-active:before{
				width: 1upx;
				height: 30upx;
				background: #999BA8;
				position: absolute;
				content: '';
				left:0;
				top:6upx;
			}
			/deep/.u-close-wrap{
				position: absolute;
				right:80px !important;
			}
			// /deep/.u-input{
			// 	padding-right: 85px;
			// }
		}
	}

	.search-box {
		width: 100%;
		padding: 30upx 30upx 0 30upx;
		box-sizing: border-box;
		background: #ffffff;
		.delete-icon {
			width: 30upx;
			height: 30upx;

			image {
				width: 30upx;
				height: 30upx;
				vertical-align: top;
			}
		}
	}

	.search-list-box {
		width: 100%;
		padding: 36upx 30upx 30upx 30upx;
		box-sizing: border-box;
	}
	.draft-title {
		padding-bottom: 29upx;
	}
	
	.filter-icon {
		width: 44upx;
		height: 44upx;
	
		image {
			width: 44upx;
			height: 44upx;
		}
	}
	
	.creation-box {
		flex-wrap: wrap;
		box-sizing: border-box;
	
		.creation-item {
			width: 337upx;
			//	height: 420upx;
			background: #FFFFFF;
			box-shadow: 0px 4upx 30upx -12upx rgba(102, 105, 120, 0.2), 0px 4upx 12upx -6upx rgba(154, 166, 219, 0.1);
			border-radius: 10upx;
			margin-bottom: 16upx;
	
			.creation-cover {
				width: 337upx;
				height: 337upx;
	
				image {
					width: 337upx;
					height: 337upx;
					border-radius: 10upx 10upx 0 0;
				}
			}
	
			.creation-quantity {
				width: 248upx;
				height: 36upx;
				background: rgba(41, 41, 64, 0.4);
				border-radius: 24upx 24upx 0px 0px;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				backdrop-filter: blur(20px);
				padding: 6upx 0;
				box-sizing: border-box;
	
				.line {
					display: block;
					height: 20upx;
					width: 2upx;
					background: #999BA8;
					margin: 0 14upx;
				}
			}
	
			.creation-item-padding {
				padding: 0 10upx;
				box-sizing: border-box;
			}
	
			.creation-item-title {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				// line-height: 83upx;
				padding-top: 31upx;
				padding-bottom: 14upx;
			}
	
			.creation-item-price {
				line-height: 44upx;
				margin-bottom: 20upx;
			}
		}
	}

	
		.album-list{
			width: 100%;
			height: 135upx;
			border-radius: 10upx;
			padding: 28upx 30upx;
			box-sizing: border-box;
			margin-bottom: 30upx;
			background: #FFFFFF;
			box-shadow: 0px 4upx 30upx -12upx rgba(102,105,120,0.2), 0px 4upx 12upx -6upx rgba(154,166,219,0.1);
			.icon-album {
				width: 30upx;
				height: 30upx;
				margin-right: 10upx;
				margin-top: 8upx;
				image{
					width: 30upx;
					height: 30upx;
				}
			}
			.album-title{
				width:540upx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.album-detail{
				width: 28upx;
				height: 28upx;
			}
		}
		.author-list {
			height: 94upx;
			margin-bottom: 44upx;
		
			.author-img {
				width: 94upx;
				height: 94upx;
				margin-right: 23upx;
		
				image {
					width: 94upx;
					height: 94upx;
					vertical-align: top;
					border-radius: 50%;
				}
			}
		}
	.recordNo-icon {
		width: 206upx;
		height: 136upx;
		margin: 130upx auto 35upx;
	
		image {
			width: 206upx;
			height: 136upx;
			vertical-align: top;
		}
	}
	.u-sticky{
		background: #ffffff;
	}
	.no-data{
		margin: 50upx auto;
		text-align: center;
		image{
			width: 300upx;
			height: 300upx;
		}
	}
</style>
